<script setup lang="ts">
import svg from '../../components/svg/index.vue'
</script>

<template>
<div class="container">
<!--  <svg width="500" height="400">-->
<!--    &lt;!&ndash; 电力线路 &ndash;&gt;-->
<!--    <line x1="50" y1="50" x2="450" y2="50" stroke="blue" />-->
<!--    &lt;!&ndash; 水平电线 &ndash;&gt;-->
<!--    <line x1="50" y1="100" x2="450" y2="100" stroke="blue" />-->
<!--    &lt;!&ndash; 供电房间 &ndash;&gt;-->
<!--    <rect x="470" y="40" width="30" height="20" fill="blue" />-->
<!--    &lt;!&ndash; 水管 &ndash;&gt;-->
<!--    <line x1="50" y1="150" x2="50" y2="300" stroke="green" />-->
<!--    &lt;!&ndash; 给水房间 &ndash;&gt;-->
<!--    <rect x="470" y="140" width="30" height="20" fill="green" />-->
<!--    &lt;!&ndash; 其他图形... &ndash;&gt;-->

<!--  </svg>-->
<!--  <svg height="100%" width="100%"> xmlns="http://www.w3.org/2000/svg">-->
<!--    <polyline points="240 10 140 10 140 90 0 90" stroke="#ddd" fill="transparent" stroke-width="2" />-->
<!--  </svg>-->
  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,100%,0">
<!--    // 引入背景图，底图或管道图-->
    <!-- <image xlink:href="../assets/images/2.png" x="0" y="0" height="100%" width="100%"/>-->
<!--    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">-->
<!--      <stop  stop-color="#ffe505"/>-->
<!--    </linearGradient>-->
<!--    <polyline-->
<!--        stroke-dasharray = '10, 5'-->
<!--        points="0 365,300 375,390 535,530 475,385,270"-->
<!--        style="-->
<!--              fill: transparent;-->
<!--              stroke-dasharray: 30, 20;-->
<!--              stroke: url(#linear);-->
<!--              stroke-linecap: round;-->
<!--              stroke-width: 5;-->
<!--            "-->
<!--    />-->
    <line x1="10%" x2="90%" y1="10%" y2="90%"  stroke-dasharray = '10, 5' stroke="orange" fill="transparent" stroke-width="1"/>
  </svg>
  <div style="width: 100px;height: 100px">
    <img src="../../assets/icons/iconPlace.svg" alt="image" style="color: red;">
  </div>
</div>
  <div class="column-wrap">
    <div class="column">
      <div class="column-opacity" />
      <!-- <div class="column-solid" :style="{height:(detail.peoplesDeputyMeetingCount/total*100).toFixed(2)+'%'}" /> -->
      <div class="column-solid" style="height:50%" />
    </div>
  </div>

</template>

<style scoped lang="scss">
.g-dashed-line {
  stroke: #fc0;
  stroke-dasharray: 20, 20;
}
line {
  animation: dash 5000s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -200000;
  }
}
// 圆柱体样式
.column-wrap {
  margin-left: 50%;
  width: 78px;
  height: 100px;
  padding: 0 10px 18px;
  background: #fff url('../../assets/1.png') 0 bottom/100% 30px no-repeat;
  .column{
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    // background: rgba(252, 163, 94, 0.38);
    &::before{
      content: '';
      position: absolute;
      top: -9px;
      width: 100%;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      z-index: 20;
    }
    .column-opacity {
      position: relative;
      flex: 1;
      background: linear-gradient(0deg, rgba(161, 77, 13, 0.05) 0%, rgba(229, 91, 93, 0.4) 100%);
      &::before{
        content: '';
        position: absolute;
        top: -10px;
        width: 100%;
        height: 18px;
        background: rgba(229, 91, 93, 0.4);
        border-radius: 50%;
        z-index: 30;
      }
    }
    .column-solid{
      position: relative;
      bottom: 0;
      z-index: 60;
      background: linear-gradient(90deg, rgba(255, 40, 55, 1), rgba(255, 164, 101, 1));
      &::before{
        content:"";
        width: 100%;
        height: 18px;
        position: absolute;
        top: -9px;
        left: 0;
        z-index: 60;
        background:  url('../../assets/2.png') 0 top/100% 18px no-repeat;

      }
      &::after {
        content: '';
        position: absolute;
        bottom: -9px;
        width: 100%;
        height: 18px;
        background: inherit;
        border-radius: 50%;
        z-index: 50;
      }
    }
  }
}

</style>
